<template>
    <div ref="preview" id="preview-md" class="preview">

    </div>
</template>

<script>
import marked from 'marked'
import Prism from 'prismjs' // 代码高亮
export default {
    props: {
        textAreaValue: {
            type: String,
            default: '',
        },
    },
    data() {
        return {

        }
    },
    watch: {
        textAreaValue: {
            handler (newVal) {
                if (!newVal) newVal = '<span>'

                let nodePreview = this.$refs['preview']
                nodePreview.innerHTML = marked(newVal)

                // 添加行号
                let aCode = nodePreview.querySelectorAll('code')
                aCode.forEach((item) => {
                    item.className.includes('language') && item.classList.add('line-numbers')
                })

                Prism.highlightAll()
            },
            immediate: false,
        },
    },
    mounted() {
        // Prism.highlightAll()
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">

    .preview {
        width: 100%;
        text-align: left;

    }
</style>
